import type {
  ComputedRef,

  // Slots
} from 'vue'
import type { BasicTableProps, InnerHandlers } from '../types/table'
import { unref, computed, h } from 'vue'
import TableHeader from '../components/TableHeader.vue'
import { isString } from '/@/utils/is'
import { getSlot } from '/@/utils/helper/tsxHelper'
import { Slots } from '/#/extendVue'
// vue2.x的 h函数和vue3.x h函数有区别  参考 https://www.jb51.net/article/270858.htm
export function useTableHeader(propsRef: ComputedRef<BasicTableProps>, slots: Slots, handlers: InnerHandlers) {
  const getHeaderProps = computed((): Recordable => {
    const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef)
    const hideTitle = !slots.tableTitle && !title && !slots.toolbar && !showTableSetting
    if (hideTitle && !isString(title)) {
      return {}
    }
    return {
      title: hideTitle
        ? null
        : () =>
            h(
              TableHeader,
              {
                // 这里需要使用props来做处理
                props: {
                  title,
                  titleHelpMessage,
                  showTableSetting,
                  tableSetting,
                },
                on: {
                  onColumnsChange: handlers.onColumnsChange,
                },
                scopedSlots: {
                  // TODO 目前插槽是没有生效的
                  ...(slots.toolbar
                    ? {
                        toolbar: () => getSlot(slots, 'toolbar'),
                      }
                    : {}),
                  ...(slots.tableTitle
                    ? {
                        tableTitle: () => getSlot(slots, 'tableTitle'),
                      }
                    : {}),
                  ...(slots.headerTop
                    ? {
                        headerTop: () => getSlot(slots, 'headerTop'),
                      }
                    : {}),
                },
              } as Recordable
              // {
              //   // TODO 目前插槽是没有生效的
              //   ...(slots.toolbar
              //     ? {
              //         toolbar: () => getSlot(slots, 'toolbar'),
              //       }
              //     : {}),
              //   ...(slots.tableTitle
              //     ? {
              //         tableTitle: () => getSlot(slots, 'tableTitle'),
              //       }
              //     : {}),
              //   ...(slots.headerTop
              //     ? {
              //         headerTop: () => getSlot(slots, 'headerTop'),
              //       }
              //     : {}),
              // } as any
            ),
    }
  })
  return { getHeaderProps }
}
